import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

///
/// 九宫格图标Demo
///
class TestGridNine extends StatefulWidget {
  TestGridNine({Key key}) : super(key: key);

  @override
  _TestGridNineState createState() => new _TestGridNineState();
}

class _TestGridNineState extends State<TestGridNine> {
  List categoryList = [];
  @override
  void initState() {
    super.initState();

    categoryList = [
      {
        "id": "business",
        "name": "Business",
        "icon": Icons.work,
        "color": Colors.teal
      },
      {
        "id": "technology",
        "name": "Technology",
        "icon": Icons.smartphone,
        "color": Colors.grey[600]
      },
      {
        "id": "science-and-nature",
        "name": "Science and Nature",
        "icon": Icons.nature_people,
        "color": Colors.green[600]
      },
      {
        "id": "sport",
        "name": "Sports",
        "icon": Icons.directions_bike,
        "color": Colors.deepOrange
      },
      {
        "id": "gaming",
        "name": "Gaming",
        "icon": Icons.videogame_asset,
        "color": Colors.orange
      },
      {
        "id": "general",
        "name": "General",
        "icon": Icons.people,
        "color": Colors.cyan
      },
      {
        "id": "entertainment",
        "name": "Entertainment",
        "icon": Icons.local_movies,
        "color": Colors.purple
      },
      {
        "id": "health-and-medical",
        "name": "Health and Medical",
        "icon": Icons.local_hospital,
        "color": Colors.red
      },
      {
        "id": "music",
        "name": "Music",
        "icon": Icons.music_note,
        "color": Colors.amber
      },
      {
        "id": "politics",
        "name": "Politics",
        "icon": Icons.assistant_photo,
        "color": Colors.blueGrey
      },
    ];
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("九宫格图标Demo"),
        centerTitle: true,
      ),
      backgroundColor: Colors.grey[200],
      body: categoryList == null
          ? const Center(child: const CircularProgressIndicator())
          : new GridView.builder(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 25.0,
              ),
              padding: const EdgeInsets.all(10.0),
              itemCount: categoryList.length,
              itemBuilder: (BuildContext context, int index) {
                return new GridTile(
                  footer: new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      new Flexible(
                        child: new SizedBox(
                          height: 16.0,
                          width: 100.0,
                          child: new Text(
                            categoryList[index]["name"],
                            maxLines: 2,
                            textAlign: TextAlign.center,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                      )
                    ],
                  ),
                  child: new Container(
                    height: 500.0,
                    child: new GestureDetector(
                      child: new Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          new SizedBox(
                            height: 100.0,
                            width: 100.0,
                            child: new Row(
                              children: <Widget>[
                                new Stack(
                                  children: <Widget>[
                                    new SizedBox(
                                      child: new Container(
                                        child: new CircleAvatar(
                                          backgroundColor: Colors.white,
                                          radius: 40.0,
                                          child: new Icon(
                                            categoryList[index]["icon"],
                                            size: 40.0,
                                            color: categoryList[index]["color"],
                                          ),
                                        ),
                                        padding: const EdgeInsets.only(
                                          left: 10.0,
                                          right: 10.0,
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                      onTap: () {
                        // Navigator.push(
                        //   context,
                        //   new MaterialPageRoute(
                        //     builder: (_) =>
                        //         new ArticleSourceScreen.ArticleSourceScreen(
                        //           sourceId: categoryList[index]['id'],
                        //           sourceName: categoryList[index]["name"],
                        //           isCategory: true,
                        //         ),
                        //   ),
                        // );
                      },
                    ),
                  ),
                );
              },
            ),
    );
  }
}
